<template>
  <div style="padding: 3%">
    <el-col :span="span" v-for="item of files" :key="item.warehouseDate" class="table-main">
      <a :href="item.url" target="_blank">
        <div class="table-column">
          {{item.bookname}}
        </div>
      </a>
    </el-col>
  </div>
</template>

<script>
import { listBookIndex } from "@/api/library";
export default {
  name: "historyFile",
  data() {
    return {
      files: [],
      span: 4,
    }
  },
  mounted() {
    listBookIndex().then(response => {
      this.files = response.rows
    });
    this.span=4;
    if (document.documentElement.clientWidth < 500) {
      this.span = 24;
    }


  }
}
</script>

<style scoped>
  .table-main {
    border: 1px black solid;
    text-align: center;
    background-color: #EFFFFF;
  }
  .table-column {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10px 0;
  }
</style>